<extend name="Common:base"/>
<block name="head">
    <style>
        .el-card__header{
            background: #3fc3e2;
            color: #fff;
        }
        #drags{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #3fc3e2;
            color: #fff;
            z-index: 9999;
            cursor: pointer;
            border-radius: 50%;
        }
        #drags:hover{
            background: yellow;
            color: green;
        }
    </style>
</block>
<block name="body">
    <div id="app" class="container">
        <div class="wrapp" v-show="show" style="display: none">
            <el-row>
                <el-col :span="24">
                    <el-form :inline="true" ref="searchForm":model="searchForm">
                        <el-form-item prop="realname" style="width: 120px">
                            <el-input v-model="searchForm.realname" size="small" placeholder="请输入员工姓名"></el-input>
                        </el-form-item>
                        <el-form-item prop="mphone" style="width: 120px">
                            <el-input v-model="searchForm.mphone" size="small" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item prop="qq" style="width: 120px">
                            <el-input v-model="searchForm.qq" size="small" placeholder="请输入QQ号"></el-input>
                        </el-form-item>
                        <el-form-item prop="weixin" style="width: 120px">
                            <el-input v-model="searchForm.weixin" size="small" placeholder="请输入微信号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="search" @click="loadDatalist">查询</el-button>
                            <el-button @click="searchReset" style="margin-left: 10px">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="dataList" v-loading="dataLoad" element-loading-text="{:L('DATA_LOGIN')}" highlight-current-row @selection-change="handleSelectionChange" border>
                        <el-table-column label="序号" width="70" :formatter="handleIndex"></el-table-column>
                        <el-table-column prop="realname" width="150" label="员工姓名"></el-table-column>
                        <el-table-column prop="department_name" width="150" label="部门"></el-table-column>
                        <el-table-column prop="mphone" label="手机" width="180" align="center"></el-table-column>
                        <el-table-column prop="qq" label="QQ号" width="180" align="center"></el-table-column>
                        <el-table-column prop="qq_nickname" label="QQ昵称" width="180" align="center"></el-table-column>
                        <el-table-column prop="weixin" label="微信号" width="160" align="center"></el-table-column>
                        <el-table-column prop="weixin_nikname" label="微信昵称" width="190" align="center"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row type="type" justify="space-between" align="middle" calss="row-bg">
                <el-col :span="12">
                    <div class="grid-content bg-purple-light pull-right">
                        <include file="Common:_pagination"/>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</block>
<block name="scripts">

    <script>
        page.searchUrl="{:U('search')}";
        window.defaultOption.setDatas({
            allRoles:{:json_encode($allRoles)},
            sexType:{:json_encode($sexType)},
            multipleSelection:[]
        }).setForm('search',{
            realname:"",
            mphone:"",
            qq:"",
            weixin:'',
            status:"1",
            plan:false
        }).setMethod('getType', function(type, field){
            return this[field][type];
        }).setMethod('handleSelectionChange', function(val){
            this.multipleSelection = val;
        }).setMethod('setImgUrl', function(url){
            return '__ROOT__' + url;
        })
    </script>
</block>